<template>
  <div>
    <div class="set-meal">
      <div class="title">套餐详情</div>
      <div class="combo-list" v-if="goodsDetail">
        <block v-for="(item, index) in goodsDetail" :key="index">
          <div class="combo-item">
            <div class="combo-title">{{ item.title }}</div>
            <block v-for="(goodsItem, goodsIndex) in item.contents" :key="goodsIndex">
              <div class="flex-j-sb combo-li">
                <div class="chil-title">{{ goodsItem.title }}</div>
                <div class="price"><span class="usage">（{{ goodsItem.usage }}份）</span>¥{{ goodsItem.price }}</div>
              </div>
              <template v-if="goodsItem.describes.length !== 0">
                <div v-for="c_describes in goodsItem.describes" class="describes">{{ c_describes.info }}</div>
              </template>
            </block>
          </div>
        </block>

      </div>
    </div>
    <slot></slot>
    <div class="mb20"></div>
    <div class="purchase-notes">
      <div class="title">购买须知</div>
      <div class="purchase-content">
        <!-- <block v-for="(item, index) in goodsNotes" :key="index">
          <div class="purchase-item">
            <div class="subheading">{{ item.name }}</div>
            <block v-for="(explainItem, explainIndex) in item.list" :key="explainIndex">
              <div class="explain">{{ explainItem.text }}</div>
            </block>
          </div>
        </block> -->
        <div class="purchase-item" v-if="goodsNotes">

          <div class="subheading">可用日期</div>
          <div class="explain">{{ goodsNotes.expire.type == 1 ? `有效期：购买后${goodsNotes.expire.days}天内有效` :
            `有效期：${goodsNotes.expire.at}` }}</div>
          <div class="subheading"
            v-if="goodsNotes.unavailable_date.weekly.selected == 1 || goodsNotes.unavailable_date.holidays.selected == 1 || goodsNotes.unavailable_date.specified.selected == 1">
            不可用日期</div>
          <div class="explain" v-if="goodsNotes.unavailable_date.weekly.selected == 1">
            <span v-for="(item, i) in goodsNotes.unavailable_date.weekly.weekdays">{{ formatDate(item) }}<span
                v-if="i + 1 !== goodsNotes.unavailable_date.weekly.weekdays.length">，</span></span>不可用
          </div>
          <div class="explain" v-if="goodsNotes.unavailable_date.holidays.selected == 1">
            节假日不可用
          </div>
          <div class="explain" v-if="goodsNotes.unavailable_date.specified.selected == 1">
            <div v-for="item in goodsNotes.unavailable_date.specified.dates">{{ item.start_date }}至{{ item.end_date
              }}&nbsp;不可用</div>
          </div>
          <div class="subheading">可用时间</div>
          <div class="explain" v-if="goodsNotes.consume.type == 1">全天可用</div>
          <div class="explain" v-else>
            <span v-for="item in goodsNotes.consume.times">{{ item.start_time }}-{{ item.end_time }}</span>
          </div>
          <div class="subheading">购买限制</div>
          <div class="explain">{{ goodsNotes.buy_limit_rule.limited == 1 ? `每人最多买${goodsNotes.buy_limit_rule.num}份` :
            '不限制' }}</div>
          <div class="subheading">预约规则</div>
          <div class="explain" v-if="booking_rule">
            {{ booking_rule.need_booking == 2 ? '到店消费：无需预约，高峰期可能需要排队' :
              `提前${booking_rule.advance_num}${booking_rule.advance_unit == 1 ? '天' : booking_rule.advance_unit == 2 ? '小时'
                : '分钟'}`
            }}</div>
          <div class="subheading">使用规则</div>
          <div class="explain">{{ goodsNotes.with_discount == 2 ? '不与店内优惠同享' : '可与店内优惠同享' }}</div>
          <div class="subheading">使用张数限制</div>
          <div class="explain">
            {{ goodsNotes.usage_sheet_rule.unlimited == 1 ? '不限制张数' : `${goodsNotes.usage_sheet_rule &&
              goodsNotes.usage_sheet_rule.num}张`
            }}</div>
          <div class="subheading">使用人数限制</div>
          <div class="explain">
            {{ goodsNotes.usage_people_rule.unlimited == 1 ? '不限制人数' : `${goodsNotes.usage_people_rule &&
              goodsNotes.usage_people_rule.num}人`
            }}</div>
        </div>

        <!-- <div class="description">
          <van-collapse v-model="activeNames" @change="onChange" :border="false" custom-class="description">
            <van-collapse-item :title="pluginSetting.price_desc_name" name="1" custom-class="description" content-class="description" :is-link="false" :border="false">
              <div slot="right-icon"><div class="iconfont" :class="activeNames == 1 ? 'icon-up' : 'icon-down'"></div></div>
              <div v-html="priceDesc"></div>
            </van-collapse-item>
            <van-collapse-item :title="pluginSetting.notice_desc_name" name="2" :is-link="false" :border="false" custom-class="description" content-class="description">
              <div slot="right-icon"><div class="iconfont" :class="activeNames == 2 ? 'icon-up' : 'icon-down'"></div></div>
              <div v-html="noticeDesc"></div>
            </van-collapse-item>
          </van-collapse>
        </div> -->
      </div>
    </div>
    <van-popup v-model="show" round closeable position="bottom"
      :style="{ 'max-height': '60%', 'min-height': '30%', backgroundColor: '#F5F5F5' }">
      <div class="popup-title">购物须知</div>
      <div class="purchase-item popup-purchase" v-if="goodsNotes">

        <div class="subheading">可用日期</div>
        <div class="explain">{{ goodsNotes.expire.type == 1 ? `有效期：购买后${goodsNotes.expire.days}天内有效` :
          `有效期：${goodsNotes.expire.at}` }}</div>
        <div class="subheading"
          v-if="goodsNotes.unavailable_date.weekly.selected == 1 || goodsNotes.unavailable_date.holidays.selected == 1 || goodsNotes.unavailable_date.specified.selected == 1">
          不可用日期</div>
        <div class="explain" v-if="goodsNotes.unavailable_date.weekly.selected == 1">
          <span v-for="(item, i) in goodsNotes.unavailable_date.weekly.weekdays">{{ formatDate(item) }}<span
              v-if="i + 1 !== goodsNotes.unavailable_date.weekly.weekdays.length">，</span></span>不可用
        </div>
        <div class="explain" v-if="goodsNotes.unavailable_date.holidays.selected == 1">
          节假日不可用
        </div>
        <div class="explain" v-if="goodsNotes.unavailable_date.specified.selected == 1">
          <div v-for="item in goodsNotes.unavailable_date.specified.dates">{{ item.start_date }}至{{ item.end_date
            }}&nbsp;不可用</div>
        </div>
        <div class="subheading">可用时间</div>
        <div class="explain" v-if="goodsNotes.consume.type == 1">全天可用</div>
        <div class="explain" v-else>
          <span v-for="item in goodsNotes.consume.times">{{ item.start_time }}-{{ item.end_time }}</span>
        </div>
        <div class="subheading">购买限制</div>
        <div class="explain">{{ goodsNotes.buy_limit_rule.limited == 1 ? `每人最多买${goodsNotes.buy_limit_rule.num}份` :
          '不限制' }}</div>
        <div class="subheading">预约规则</div>
        <div class="explain" v-if="booking_rule">
          {{ booking_rule.need_booking == 2 ? '到店消费：无需预约，高峰期可能需要排队' :
            `提前${booking_rule.advance_num}${booking_rule.advance_unit == 1 ? '天' : booking_rule.advance_unit == 2 ? '小时'
              : '分钟'}`
          }}</div>
        <div class="subheading">使用规则</div>
        <div class="explain">{{ goodsNotes.with_discount == 2 ? '不与店内优惠同享' : '可与店内优惠同享' }}</div>
        <div class="subheading">使用张数限制</div>
        <div class="explain">
          {{ goodsNotes.usage_sheet_rule.unlimited == 1 ? '不限制张数' : `${goodsNotes.usage_sheet_rule &&
            goodsNotes.usage_sheet_rule.num}张`
          }}</div>
        <div class="subheading">使用人数限制</div>
        <div class="explain">
          {{ goodsNotes.usage_people_rule.unlimited == 1 ? '不限制人数' : `${goodsNotes.usage_people_rule &&
            goodsNotes.usage_people_rule.num}人`
          }}</div>
      </div>

    </van-popup>
  </div>
</template>
<script>
import purchaseNotes_controller from "./purchaseNotes_controller.js";
export default purchaseNotes_controller;
</script>
<style scoped>
.popup-item-left {
  position: relative;
  width: 6.7813rem;
  flex-shrink: 0;
}

.describes {
  margin-top: .5rem;
  margin-bottom: .75rem;
  font-weight: 400;
  text-align: left;
  font-size: .75rem;
  color: #999999;
}

.chil-title {
  font-weight: 400;
  font-size: .875rem;
  color: #00001C;
}

.usage {
  font-weight: 400;
  font-size: .875rem;
  color: #999999;
}

.price {
  font-weight: 400;
  font-size: .875rem;
  color: #00001C;
}

.popup-item-right {
  flex: 1;
  padding: 1.0625rem .75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.popup-item {
  position: relative;
  margin: 0 .75rem .625rem;
  height: 5.625rem;
  background: #FFFFFF;
  border-radius: .625rem .625rem .625rem .625rem;
  display: flex;
}

.popup-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 .625rem;
  box-sizing: border-box;
  height: 3.25rem;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup-title {
  margin-top: 1.375rem;
  text-align: left;
  margin-left: .75rem;
  font-weight: bold;
  font-size: 1rem;
  color: #00001C;
  margin-bottom: 1.0625rem;
}

.van-collapse-item__title .spread-img {
  width: 0.4375rem;
  height: 0.2188rem;
}

.description ::v-deep .van-cell {
  background-color: #f8f8fa;
}

.description ::v-deep .van-collapse-item__content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}

.description ::v-deep .van-collapse-item__content {
  background-color: #f8f8fa;
}

.purchase-content .van-collapse-item__title {
  background-color: #f8f8fa;
}
</style>
<style lang="scss" scoped>
/* 套餐详情 */
.mb20 {
  height: 0.625rem;
  clear: both;
}

.set-meal {
  margin: 0 0.625rem;
  background-color: #fff;
  padding: 0.75rem .75rem 0.7813rem 1.625rem;
  border-radius: 0.3125rem;

  .title {
    font-weight: 500;
    font-size: .9375rem;
    color: #00001C;
    margin: 0 0 .9375rem -0.9375rem;
    text-align: left;
  }
}

.combo-item:last-child {
  border-bottom: unset;
}

.combo-item {
  border-bottom: 1px solid #F0F0F1;
  margin-bottom: .9375rem;

  .combo-title {
    position: relative;
    font-size: .875rem;
    line-height: 1;
    font-weight: bold;
    color: #222;
    margin: 0 0 0.75rem 0;
    text-align: left;

    &::after {
      content: "";
      position: absolute;
      left: -0.75rem;
      top: 50%;
      transform: translateY(-50%);
      width: .25rem;
      height: .25rem;
      background-color: #D6D6DC;
    }
  }

  .combo-li {
    font-size: 0.75rem;
    color: #888;
    position: relative;
    margin: 0 0 0.75rem 0;


  }
}

/* 购买须知 */

.popup-purchase {
  margin: .75rem !important;
  background-color: #fff;
  border-radius: .5rem;
  padding: .75rem;
}

.purchase-notes {
  margin: 0 0.625rem;
  padding: 0.75rem 0.625rem 0.7813rem 0.625rem;
  background-color: #fff;
  border-radius: 0.3125rem;

  .title {
    font-weight: 500;
    font-size: .9375rem;
    color: #00001C;
    margin: 0 0 1.375rem 0;
    text-align: left;
  }
}

.purchase-item {
  margin: 0 0 1.375rem 0;

  .subheading {
    font-weight: bold;
    font-size: .875rem;
    color: #222;
    margin: 0 0 0.625rem 0;
    position: relative;
    padding-left: .625rem;
    text-align: left;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0.3125rem;
      height: 0.3125rem;
      border-radius: 50%;
      background-color: #D6D6DC;
    }
  }

  .explain {
    font-weight: 400;
    font-size: .875rem;
    color: #00001C;
    padding: 0 0 0 0.625rem;
    margin: 0 0 0.5rem 0;
    text-align: left;


  }
}

.description {
  background-color: #f8f8fa !important;

  div {
    background-color: #f8f8fa !important;
  }
}
</style>
